<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>后台管理系统模板</title>
    <div th:include="~{views/common/include :: cssStyle}"></div>
    <!-- 引入bootstrapmarkdown样式-->
    <link rel="stylesheet" th:href="@{/static/js/plugins/markdown/css/bootstrap-markdown.min.css}">
    <!--时间选择插件-->
    <link rel="stylesheet" th:href="@{/static/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css}">
    <!--日期选择插件-->
    <link rel="stylesheet" th:href="@{/static/js/bootstrap-datepicker/bootstrap-datepicker3.min.css}">
</head>
<body>
<div class="coder-layout-web">
    <div class="coder-layout-container">
        <!--左侧导航-->
        <div th:include="~{views/common/include :: #asideStyle}"></div>
        <!--End 左侧导航-->
        <!--头部信息-->
        <div th:include="~{views/common/include :: #headerStyle}"></div>
        <!--End 头部信息-->
        <!--页面主要内容-->
        <main class="coder-layout-content">

            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-toolbar clearfix">
                                <!-- 查询搜索框start-->
                                <div id="toolbar">
                                    <div class="my-container">
                                        <label class="myLabel-content">题目名称：</label>
                                        <div class="myText-content">
                                            <input id="q_name" name="name" type="text" class="form-control" placeholder="输入题目名称">
                                        </div>
                                    </div>

                                    <div class="myBtn-content">
                                        <!--点击搜索按钮  调用search方法  data-method="search-->
                                        <button id="search" type="button" class="btn btn-primary" data-toggle="modal" data-method="search">
                                            <i class="mdi mdi-account-search"></i>搜索</button>
                                    </div>
                                </div>
                                <!-- 查询搜索框end-->
                                <!-- 按钮区start-->
                                <div class="toolbar-btn-action">
                                    <button  type="button" class="btn btn-primary" data-toggle="modal" data-method="add" >
                                        <i class="mdi mdi-plus"></i>新增题目
                                    </button>
                                </div>
                                <!-- 按钮区end-->
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table id="questionTable" ></table>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

        </main>

    </div>
</div>

<div th:include="~{views/common/include :: #jsStyle}"></div>
<script type="text/javascript"  th:src="@{/static/js/jquery.serialize-object.min.js}"></script>
<script  th:src="@{/static/js/plugins/markdown/js/markdown.js}"></script>
<script  th:src="@{/static/js/plugins/markdown/js/to-markdown.js}"></script>
<script  th:src="@{/static/js/plugins/markdown/js/bootstrap-markdown.js}"></script>
<script  th:src="@{/static/js/plugins/markdown/js/marked.js}"></script>

<!--时间选择插件-->
<script th:src="@{/static/js/bootstrap-datetimepicker/moment.min.js}"></script>
<script th:src="@{/static/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js}"></script>
<script th:src="@{/static/js/bootstrap-datetimepicker/locale/zh-cn.js}"></script>

<!--日期选择插件-->
<script th:src="@{/static/js/bootstrap-datepicker/bootstrap-datepicker.min.js}"></script>
<script th:src="@{/static/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js}"></script>
<script th:src="@{/static/js/my-ajax.js}"></script>
<script th:src="@{/static/js/confirm.js}"></script>

<!--图表插件-->
<script type="text/javascript" th:inline="javascript">
    var ctxPath = [[${#httpServletRequest.getContextPath()}]];
    $(document).ready(function(e){
        $('#questionTable').bootstrapTable({
            url: ctxPath +'/Question/listPage',          //请求后台的URL（*）
            method: 'GET',                      //请求方式（*）
            //toolbar: '#toolbar',              //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: true,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
            pageSize: 10,                     //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            iconsPrefix: 'mdi', // 自定义表格右上角的图标，这个必须要定义，因为不是官方模板，icon图标样式名字不同会导致图标无法显示
            icons:  {
                refresh: 'mdi-refresh',              // 刷新图标
                columns: 'mdi-format-list-bulleted', // 列图标
                toggleOff: 'mdi-toggle-switch-off',  // 切换光
                toggleOn: 'mdi-toggle-switch',       // 切换开
                detailOpen: 'mdi-plus',              // 详情开
                detailClose: 'mdi-minus',            // 详情光
                fullscreen: 'mdi-fullscreen'         // 全屏图标
            },
            search: false,                      //是否显示表格搜索
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列（选择显示的列）
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "id",                     //每一行的唯一标识，一般为主键列
            showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                  //是否显示父子表
            singleSelect: false, //开启单选,想要获取被选中的行数据必须要有该参数
            queryParams : function(params) {//上传服务器的参数
                var temp = {
                    page: (params.offset / params.limit) + 1,
                    limit: params.limit,  //每页显示数量
                    // questionTitle: $("#q_name").val() // 获取到搜索时输入的name值，传到后台
                };
                return temp;//查询到数据 返回到前台进行展示
            },
            columns: [
                {
                    align : 'center',
                    checkbox: true
                },{
                    field: 'id',
                    title: '问题编号'
                }, {
                    field: 'questionTitle',
                    title: '问题标题'
                }, {
                    field: 'questionAnswer',
                    title: '问题答案',
                    formatter : answerFormatter
                }, {
                    field: 'typeId',
                    title: '问题类型',
                    formatter:questionTypeFormatter
                },
                {
                    field: 'status',
                    title: '问题状态',
                    formatter:questionStatusFormatter
                },
                {
                    field: 'createDate',
                    title: '创建时间'
                },
                {
                    field: 'user',
                    title: '创建者',
                    formatter:userFormatter
                },
                {
                    field: 'doOpt',
                    title: '操作',
                    formatter : optFormatter
                }]
        });
        //题库列表的字段 创建者 的名称进行格式化，因为返回数据是对象的形式（返回的Question实体表里有user对象），所以通过 点 点属性来获取值row.user.username 进行展示
        //value即后台返回的Question实体表（里面有user对象等三个对象）数据（sql语句查询到的数据 questionMap 的字段一一映射到Question表的字段中）,
        // row即取到的数据中的一行一行数据,index 索引参数，用来定位是第几个字段
        function userFormatter(value,row,index){
            if(row.user){
                return "<span style='color:red'>"+row.user.username+"</span>"
            }else{
                return "<span style='color:blue'>无创建者</span>"
            }
        }
        //问题类型格式化
        function questionTypeFormatter(value,row,index){
            if(row.typeId==1){
                return "<span >选择题</span>"
            }else if(row.typeId == 2){
                return "<span >填空题</span>"
            }else if(row.typeId == 3){
                return "<span >判断题</span>"
            }else if(row.typeId == 4){
                return "<span >简答题</span>"
            }
        }
        function questionStatusFormatter(value,row, index){
            if(row.status==0){
                return "<span >正常</span>"
            }else if(row.status == 1){
                return "<span style='color:red'>停用</span>"
            }
        }//
        function answerFormatter(value,row, index){
            if(row.questionAnswer==0){
                return "<span class='mdi mdi-close' style='color:red'></span>"
            }else if(row.questionAnswer == 1){
                return "<span class='mdi mdi-check' style='color:red'></span>"
            }else{
                if(row.questionAnswer==null){
                    return "<span style='color:red'>您看着打分就是</span>"
                }
                return "<span style='color:red'>"+row.questionAnswer+"</span>"
            }
        }
        function optFormatter(value,row, index){//根据id进行修改，把id传到后台
            var c = '<a class="btn btn-xs btn-default" href="#!"  onclick=\'edit("' + row.id + '")\' title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>';
            var e = '<div class="btn btn-xs btn-default"  href="#!" onclick="del(\''+row.id+'\')" title="删除"  data-toggle="tooltip"><i class="mdi mdi-window-close"></i><div/> ';
            return c + e ;
        }


        //绑定事件
        $("button,a").on('click',function(){
            //获取到 a标签里面配置 data-method
            var methodName = $(this).data('method');
            if(methodName){
                doMethod[methodName]();
            }
        });
        var markDownObj = null;
        var doMethod = {
            search:function(){//进行 查询时
                //查询方法
                var name = $("#q_name").val();//获取输入框的值
                var queryparam = {
                    query:{
                        questionTitle:name
                    }
                };//参数值queryparam即questionTitle传到后台
                $('#questionTable').bootstrapTable('refresh',queryparam);

            },
            add:function(){
                //2.弹出新增问题的页面  （后台路经 /question/gotoAddQuestion）
                location.href = ctxPath +"/Question/gotoAddQuestion"
            }

        }
    });

    /* ------------------------ [修改操作] ------------------------ */
    function edit(id){
        //2.弹出修改问题的页面
        //  使用路径参数的设置法: /gotoEditQuestion/100
        location.href = ctxPath +"/Question/gotoEditQuestion/"+ id
    }

    /* ------------------------ [删除操作] ------------------------ */
    function del( id ){
        $.confirm({
            title:'温馨提示',
            content:'亲,你真的要删除数据吗?',
            type:'green',
            buttons:{
                ok:{
                    text:'确定',
                    btnClass:'btn-green',
                    action:function(){//（1）点击确定，执行action函数，开始真正删除
                        //根据id 删除数据，id传到后台"id":id，get请求方式
                        deleteJSON(
                            {
                               url: ctxPath +"/Question/deleteQuestion/"+ id,
                               success:function( resp ){
                                   if( resp.result=='success' ){
                                       confirmOK('删除成功');
                                       $("#questionTable").bootstrapTable('refresh');
                                   }else{
                                       confirmFail('删除失败, 原因:'+ resp.cause);
                                   }
                               }
                        });
                    }
                },
                cancel:{
                    text:'取消',
                    btnClass:'btn-red'
                }
            }
        })
    }
</script>

<style>
    .md-header{ margin-left: 0px; }
    .my-container {
        float: left;
        display: inline-block;
        margin-right:30px;
    }
    .myLabel-content ,.myText-content,.myBtn-content{
        float: left;
        display: inline-block;
        line-height: 40px;
        margin-left: 10px;
    }
    .myLabel-content,.myText-content input[type='text'],.myBtn-content .btn {
        height: 38px;
        font-size: 15px;
    }
    .myBtn-content .btn {
        margin-bottom: 10px;
        margin-right: 20px;
    }
</style>

</body>
</html>